<template>
  <a-card :bordered="false">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="操作人员">
          <a-input placeholder="请输入" v-model="queryParam.operName"/>
        </a-form-item>
        <a-form-item label="操作类型">
          <a-select placeholder="请选择" v-model="queryParam.businessType" >
            <a-select-option
              v-for="dict in businessTypes"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="操作状态">
          <a-select placeholder="请选择" v-model="queryParam.status">
            <a-select-option
              v-for="dict in commonStatus"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="操作时间">
          <a-range-picker v-model="range" class="width-25"/>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="() => { queryParam = {status: undefined, businessType: undefined}; range = null; }">重置</a-button>
        </span>
      </a-form>
    </div>
    <s-table
      size="default"
      ref="table"
      rowKey="operId"
      :rowSelection="null"
      :columns="columns"
      :data="loadData"
      :rangPicker="range"
      defaultSort="operTime"
    >
      <span slot="status" slot-scope="text">
        <DictTag :options="commonStatus" :value="String(text)" />
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button
          v-has="'system:operLog:detail'"
          type="primary"
          ghost
          size="small"
          class="_mr-5"
          @click="handleDetail(record)"
        >
          详情
        </a-button>
      </span>
    </s-table>
    <operLog-modal ref="modal" :businessTypes="businessTypes" :commonStatus="commonStatus" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getOperLogList, operLogExport } from '@/api/system/monitor'
import OperLogModal from './modules/OperLogModal.vue'
import DictTag from '@/components/DictTag'

export default {
  name: 'TableList',
  components: {
    STable,
    OperLogModal,
    DictTag
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      mdl: {},
      permissions: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { status: undefined, businessType: undefined },
      // 表头
      columns: [
        {
          title: '系统模块',
          dataIndex: 'title'
        },
        {
          title: '操作类型名称',
          dataIndex: 'businessValue'
        },
        {
          title: '操作人员',
          dataIndex: 'operName'
        },
        {
          title: '主机',
          dataIndex: 'operIp'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作时间',
          dataIndex: 'operTime',
          scopedSlots: { customRender: 'action' }
        }
      ],
      range: null,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getOperLogList(Object.assign(parameter, this.queryParam))
      },
      businessTypes: [],
      commonStatus: []
    }
  },
  async created () {
    this.businessTypes = await this.Dict.get('sys_oper_type');
    this.commonStatus = await this.Dict.get('sys_common_status')
  },
  methods: {
    handleDetail (record) {
      this.$refs.modal.detail(record)
    },
    handleOk () {
      this.$refs.table.refresh(true)
    }
  }
}
</script>
